<template>
    <div class="home-box">
        <mt-swipe :auto="4000">
             
            <mt-swipe-item v-for="item in lunbotuList" :key="item.id">
                <!-- src是普通标签，只会将属性值当字符串输出,所以需要用v-bind绑定 -->
                <img :src="item.img">
            </mt-swipe-item>           
        </mt-swipe>
        <!-- <h3>HomeContainer</h3> -->

    <!-- 九宫格 -->
     <ul class="mui-table-view mui-grid-view mui-grid-9">
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <!-- 8day-10.1  将a连接改为router-link -->
                <!-- <a href="#"> -->
		            <!-- <span class="mui-icon mui-icon-home"></span>
                     -->
                <router-link to="/home/newslist">
                     <img src="../../images/menu1.png" alt="">
		            <div class="mui-media-body">新闻资讯</div></router-link></li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="#">
		             <img src="../../images/menu2.png" alt="">
		            <div class="mui-media-body">图片分享</div></router-link></li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="#">
		           <img src="../../images/menu3.png" alt="">
		            <div class="mui-media-body">商品购买</div></router-link></li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="#">
		            <img src="../../images/menu4.png" alt="">
		            <div class="mui-media-body">留言反馈</div></router-link></li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="#">
		            <img src="../../images/menu5.png" alt="">
		            <div class="mui-media-body">视频专区</div></router-link></li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="#">
		             <img src="../../images/menu6.png" alt="">
		            <div class="mui-media-body">联系我们</div></router-link></li>
		    
	</ul> 

    <!-- 九宫格 -->

    </div>


</template>

 <script>
 import { Toast } from 'mint-ui'
    // 16.3  获取轮播团数据
    export default {
        data(){
            return {
                lunbotuList:[] //保存轮播图的数组
            };
        },
        created(){
            this.getLunbotu();
        },
        methods:{
            getLunbotu(){
                // 用VueResource发起get请求
                this.$http.get('api/getlunbo')
                .then(res=>{
                    // console.log(res.body)  
                    if(res.body.status===0){
                        this.lunbotuList=res.body.message;
                        //   Toast('加载成功')
                    }else{
                        // 弹出加载失败、
                        Toast('加载失败')
                    }

                })
            }
        }
    }


 </script>

<style lang="scss" >
    /* 默认的轮播图不显示，因为父盒子是没有高度的，所以要添加
     */
      /* 给每个图片设置一个颜色  
         /* 这种为啥不行 */ 
     .mint-swipe {
         height: 200px;
        img {
         width: 100%;
         height: 100%;
        } 
             
     }
    //  去掉九宫格的背景色和边框线(这两类名之间不能有空格)
     .mui-grid-view.mui-grid-9 {
         background-color:#fff;
         border:none ;
         img {
             width: 60px;
         }
         .mui-media-body {
            font-size: 16px;
         } 
         
     }
      .mui-grid-view.mui-grid-9 .mui-table-view-cell {
          border: none;
          
      }
    
          /* .mint-swipe-item {
         &:nth-child(1){
              background-color: red 
         } */
   
     /* 给每个图片设置一个颜色
         1  用交集选择器 */
     /* .mint-swipe-item:nth-child(1) {        
            background-color: red       
        
     }
     .mint-swipe-item:nth-child(2) {        
            background-color: rgb(153, 84, 84)       
        
     }*/
   /* .mt-swipe  */

</style>